<template>
  <div class="content">
    <!-- 滤镜盒子部分 -->
    <div class="detail_list">
      <div class="detail_list_bg" :style="{'background-image':'url(' + moviedetail.bgcimg + ')', }"></div>
      <div class="filter"></div>
      <div class="imgdiv">
        <img class="imagine" :src="moviedetail.img" alt="无法显示图" />
      </div>
      <div class="text">
        <h2>{{ moviedetail.moviename }}</h2>
        <p>{{ moviedetail.ename }}</p>
        <p>{{ moviedetail.grade }}</p>
        <p>{{ moviedetail.type }}</p>
        <p>{{moviedetail.address}} / {{ moviedetail.time}}分钟</p>
        <p>{{ moviedetail.date }}上映</p>
      </div>
    </div>
    <!-- 中间内容 -->
    <p class="center">{{ moviedetail.story }}</p>
    <!-- Swiper滑动区域 -->
    <swiper class="swiper" :options="swiperOption">
      <swiper-slide v-for="value in moviedetail.actor" :key="value.actorname">
        <img :src="value.actorimg" />
        <p>{{ value.actorname }}</p>
        <p>{{ value.role }}</p>
      </swiper-slide>
    </swiper>
  </div>
</template>
<script>
import { Toast } from "mint-ui";
import { Indicator } from "mint-ui";
export default {
  data() {
    return {
      moviedetail: "",
      swiperOption: {
        slidesPerView: 5,
        spaceBetween: 0,
        freeMode: true,
      },
    }
  },
  created() {
    
  },
  activated() {
    this.getdetailbyid()
  },
  methods: {
    async getdetailbyid() {
      Indicator.open();
      const res = await this.$axios.get(
        `http://192.168.43.145:3000/detail/${this.$route.params.id}`
      );
      if (res.status == 200) {
        this.moviedetail = res.data;
        this.$nextTick(Indicator.close())
      } else {
        Indicator.close()
        Toast("请求失败")
      }


    },
  },
}
</script>
<style  scoped>
.content {
  position: relative;
  z-index: 0;
  background-color: white;
  flex: 1;
}
/* 轮播区域 */
.swiper-container {
  max-width: 100%;
}
.swiper-slide{
    text-align: center;
}
.swiper-slide img{
        margin: auto;
    }
/* 背景盒子 */
.detail_list {
  height: 200px;
  width: 100%;
  overflow: hidden;
  position: relative;
}
.detail_list_bg {
  height: 100%;
  width: 100%;
  /* background-image: url('../lib/1.png'); */
  background-size: cover;
  background-position: center;
  filter: blur(10px);
}
.filter {
  height: 100%;
  width: 100%;
  background-color: #40454d;
  opacity: 0.5;
  position: absolute;
  top: 0;
}
/* 内容区域 */
.imgdiv {
  width: 108px;
  height: 150px;
  position: absolute;
  top: 20px;
  left: 20px;
}
.imagine {
  width: 100%;
}
.text {
  position: absolute;
  left: 150px;
  top: 20px;
}
.text h2 {
  font-size: 20px;
  color: white;
  line-height: 40px;
}
.text p {
  font-size: 14px;
  color: #ccc;
  line-height: 20px;
}
.center {
  padding: 10px;
}
</style>
